//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';

//NavController就是用来管理和导航页面的一个controlle
//NavParams 这个是参数
import { NavController,NavParams } from 'ionic-angular';

import {ToastController  } from 'ionic-angular';

//导入菜单的控制器
import {MenuController  } from 'ionic-angular';

//导入envent 和tab
import { Events, Tabs } from 'ionic-angular';

import { DomController } from 'ionic-angular';

@Component({
    selector: 'page-web',
    templateUrl: 'menu.html'
  })
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class MenuPage {
    //菜单
    menus=['菜单1','菜单2','菜单2','菜单2','菜单2','菜单2','菜单2'];

    constructor(
        public navCtrl: NavController,
        public params:NavParams,
        public menuCtl:MenuController,
        private toastCtrl: ToastController) {
      }

    //退出
    back(){
        this.navCtrl.pop();
    } 

    //打开菜单
    openMenu(){
        this.menuCtl.open();
    }

    //关闭菜单
    closeMenu(){
        this.menuCtl.close();
    }

    //切换菜单
    toggoleMenu(){
        this.menuCtl.toggle();
    }

    //进入界面资源还没有加载完成的情况
    ionViewDidLoad() {
        console.log('ionViewDidLoad FriendsPage');

        // document.getElementById();
        var tabs = document.getElementsByClassName('tabbar').item(0);
        tabs['style'].display = 'none';
     }

     //当已经进入界面的情况
     ionViewDidEnter(){
      
     }

     //离开页面的时候，设置显示下面的tabbar
     ionViewWillLeave(){
        var tabs = document.getElementsByClassName('tabbar').item(0);
        tabs['style'].display = 'flex';
     }

     //点击了哪一条消息
    clickItem(item){
        console.log(item);
        this.showInfo(item+"");
    }

    //显示toast消息
    showInfo(name){
        let toast = this.toastCtrl.create({
            message: '点击了'+name, //提示消息
            duration: 3000,//3秒后自动消失
            position: 'bottom',//位置top,bottom
            showCloseButton:true, //是否显示关闭按钮
            closeButtonText:"关闭" //关闭按钮字段
        });

        //关闭后执行的操作
        toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); });

        //显示toast
        toast.present();//符合触发条件后立即执行显示。
    }

}